import React from 'react';
import {
  View, Text, TouchableOpacity, StyleSheet
} from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import { colors, sizes } from '../constants/theme';

export default function StepItem(props) {
  const { item, navigation } = props;
  const { instanceId } = item;

  const renderState = (state) => {
    const [name, color] = state === 'running'
      ? ['play', colors.secondary] : ['checkcircle', 'green'];
    return (<AntDesign name={name} size={sizes.base} style={{ color }} />
    );
  };

  return (
    <TouchableOpacity onPress={() => { navigation.navigate('StepTask', { instanceId }); }}>
      <View style={[
        styles.item,
        { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }
      ]}
      >
        <View>
          <Text style={{ fontSize: sizes.base, marginVertical: 3 }}>
            {`工序: ${item.description}`}
          </Text>
          <Text style={{ marginVertical: 3 }}>
            {item.device ? `服务名: ${item.name}` : `发布人: ${item.source}`}
          </Text>
          <Text style={{ marginVertical: 3 }}>
            所属流程：
            {item.process}
          </Text>
        </View>
        {renderState(item.state)}
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  status: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: sizes.sperate
  },
  item: {
    backgroundColor: 'white',
    padding: 10,
    marginHorizontal: 5,
    marginVertical: 3,
    borderColor: colors.gray3,
    borderWidth: 0.5,
    borderRadius: 2,
    shadowColor: colors.gray,
    shadowOffset: { width: 0.5, height: 0.5 },
    shadowOpacity: 0.4,
    shadowRadius: 1,
    elevation: 2
  }
});
